<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户创建的歌单</title>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/element.js"></script>
		<script src="../../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/menus/mySong/sheet.css" />
	</head>
	<body>
		<div id="app">
			<!-- 创建歌单 -->
			<div class="addSheet">
				<span class="button" @click="addSheet">
					<i class="iconfont icon-tianjia1"></i>&nbsp;创建歌单
				</span>
			</div>
			<!-- 用户创建的歌单列表 -->
			<div class="sheetList">
				<div class="sheet" v-for="(sheet, index) in sheetList">
					<div class="sheetImg" >
						<img :src="sheet.img"
							alt="" >
						<div class="mask" @mouseover="mouseOver(index)" 
							@mouseleave="mouseLeave(index)" @click="mouseClick(sheet.id)"
							@contextmenu.prevent="rightClick(sheet.id)">
							<i class="iconfont icon-24gf-playCircle"></i>
						</div>
					</div>
					<div class="sheetName" @click="mouseClick(sheet.id)">{{sheet.name}}</div>
					
					<div class="sheetUserName">
						<span v-for="user in sheet.userList">{{user.nickName}}</span>
					</div>
				</div>
			</div>
			
			<!-- 添加歌单 -->
			<el-dialog id="el-dialog" title="添加歌单" :visible.sync="addFormVisible" width="55%">
				<el-form class="addform" :model="addFrom" ref="addForm" label-position="right" label-width="70px"
					size="mini">
					<el-form-item label="歌单名">
						<el-input v-model="addFrom.name" placeholder="请输入歌单名" style="width:200px">
						</el-input>
					</el-form-item>
					<el-form-item label="图片">
						<el-upload ref="uploadImage" class="upload-demo"
							action="http://localhost:8160/sheet/uploadAddImg" :on-change="handleChangeAddImg"
							:headers="headers" :on-success="uploadAddImgSuccess" :file-list="fileImgList" list-type="picture"
							:before-upload="beforeUploadAddImg" :show-file-list="showImgFileList">
							<el-button size="small" type="primary">选择文件</el-button>
							<div slot="tip" class="el-upload__tip">只能上传 image 文件，且不超过30MB</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="介绍">
						<el-input type="textarea" v-model="addFrom.remarks" name="remarks"
							placeholder="请输入介绍" rows=3 style="width:300px">
						</el-input>
					</el-form-item>
					
				</el-form>
				<div slot="footer">
					<el-button @click="addFormVisible = false" size="mini">取 消</el-button>
					<el-button type="primary" @click="addSubmit" size="mini">提 交</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					sheetList: '', //歌单信息
					addFormVisible: false ,//添加歌单
					addFrom: '',
					headers: {
						"token": this.getCookie('yxy-pre:user_token')
					},
					// 上传歌曲图片 文件列表
					fileImgList: [{
						name: '',
						url: ''
					}],
					showImgFileList: false
				}
			},
			mounted() { // 生命周期函数
				this.getSheet()
			},
			methods: {
				// 获取父页面的一些数据
				getSheet() {
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/getSheet',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.sheetList = res.data.data.sheetList
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 鼠标移入，图片上移
				mouseOver(index){
					console.log('鼠标移入')
					const imgDocument = document.querySelectorAll('.sheetImg img')
					imgDocument[index].style.transform = 'translateY(-10px)'
				},
				// 鼠标移出，图片下移
				mouseLeave(index){
					console.log('鼠标移出')
					const imgDocument = document.querySelectorAll('.sheetImg img')
					imgDocument[index].style.transform = 'translateY(0px)'
				},
				// 鼠标点击
				mouseClick(id){
					const topHtml =  window.top.document.querySelector("#indexIframe")
					topHtml.setAttribute('src', 'sheet/sheet.html?id='+id)
				},
				// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
				// 鼠标右键
				rightClick(id){
					console.log(id)
				},
				addSheet(){
					this.addFormVisible = true
					this.addFrom = {}
					this.fileImgList = []
				},
				// 添加图片文件 改变时会调用
				handleChangeAddImg(file, fileList) {
					// 显示文件列表
					this.showImgFileList = true
					if (fileList.length > 0) {
						this.fileImgList = [fileList[fileList.length - 1]] // 显示最后一次选择的文件
					}
				},
				// 文件上传前调用 判断文件大小、类型
				beforeUploadAddImg(file) {
					// file.type image/jpeg image/png 
					// 对 file.type.slice(0, 5) image 进行截取，判断是否是图片
					const isImage = file.type.slice(0, 5) === 'image';
					const isLt30M = file.size / 1024 / 1024 < 30;
					if (!isImage) {
						this.$message.error('上传的文件不是图片!');
					}
					if (!isLt30M) {
						this.$message.error('上传头像图片大小不能超过 30MB!');
					}
					return isImage && isLt30M;
				},
				// 文件上传成功的回调
				uploadAddImgSuccess(response, file, fileList) {
					console.log(response)
					if (response.code == 200) {
						this.$message.success(response.message);
						// 获取文件访问地址
						let sheetAddImgUrl = response.data.sheetImgUrl
                		// 将文件访问地址保存到 本地会话空间
                		localStorage.setItem('sheetAddImgUrl', sheetAddImgUrl)
					} else {
						this.$message.error(response.message);
					}
					//刷新列表数据，重新求情列表数据
					this.getSheet()
				},
				addSubmit(){
					let sheetImgUrl = localStorage.getItem('sheetAddImgUrl') 
            		this.fileImgList.length === 0 ? null:sheetImgUrl
					axios({
						method: 'post',
						url: 'http://localhost:8160/sheet/addSheet',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						},
						data: {
							name: this.addFrom.name,
							remarks: this.addFrom.remarks,
							status: 0,
							img: sheetImgUrl
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 刷新列表数据，重新求情列表数据
							this.getSheet()
							// 刷新父页面的数据
							window.parent.getUserInfo
							this.$message.success(res.data.message)
							this.addFormVisible = false
						} else { //失败
							this.$message.error(res.data.message)
						}
						// 清除本地存储
						localStorage.removeItem('sheetAddImgUrl')
					})
				}
			},
		})
	</script>
</html>